<!doctype html>  
<!--[if lt IE 7 ]> <html lang="en" class="no-js ie6"> <![endif]-->
<!--[if IE 7 ]>    <html lang="en" class="no-js ie7"> <![endif]-->
<!--[if IE 8 ]>    <html lang="en" class="no-js ie8"> <![endif]-->
<!--[if IE 9 ]>    <html lang="en" class="no-js ie9"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--> <html lang="en" class="no-js"> <!--<![endif]-->
<head>
  <meta charset="utf-8">

  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

  <title>{{ title }}</title>
  <meta name="description" content="">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="shortcut icon" href="../favicon.ico">
  <link rel="apple-touch-icon" href="../apple-touch-icon.png">
  <link rel="stylesheet" href="../css/style.css?v=2">
  <link rel="Stylesheet" type="text/css" href="../css/jHtmlArea.css" />


  

  <!-- Uncomment if you are specifically targeting less enabled mobile browsers
  <link rel="stylesheet" media="handheld" href="css/handheld.css?v=2">  -->
 
  <script src="js/libs/modernizr-1.6.min.js"></script>
  <style type="text/css">
    div.treats ul {margin:0;}
	div.treats ul li {list-style:none;margin:5px 0;}
	input#title {padding:5px;margin:5px 0;width:492px;}
	textarea#page {margin:5px 0;position:relative;left:10px;}
	div.cleditorMain, input#save{margin:5px 0;}
	div#container {width:960px; margin:0 auto;}
	div.right {width: 20%; float:right; margin-right:10px;}
	div.left {width: 75%; float:left;margin-left:10px;}
	header, footer {margin:10px;}
	header h1 {font-size: 2em;}
	p.save_message {padding:2px;background:#ffff99;width:200px;}
	a.red {color:#BF0000;}
	div.jHtmlArea {border: 1px solid #ddd;}
	div#display div#display-controls {margin-top:5px;border-top:1px solid #ddd;padding:5px 0;}
  </style>
</head>

<body>

  <div id="container">
    <header>
		<p><a href="/">Home</a> | <a href="{{ logout }}">Sign out</a></p>
		<h1>{{ title }}</h1>
    </header>
    
    <div id="main" class="clearfix">
		<div class="right">
				<h4>Your pages</h4>
                <div class="treats"><img src="/images/ajax-loader.gif" class="ajax" /></div>
		</div>
		<div class="left">
			<div id="display">
				{{ page }}
				<div id="display-controls"><a href="#" id="edit-page">Edit this page</a></div>
			</div>
			<div id="edit" style="display:none;">
				<p class="save_message" style="display:none">Page updated!</p>
				<form method="post" id="update">
					<textarea id="page" rows="20" cols="80" name="page">
					</textarea>
					<br />
					<input type="hidden" id="title" value="{{ title }}" />
					<input type="hidden" id="treat_key" value="{{ treat_key }}" />
					<input type="hidden" id="encoded_html" value="{{ page }}" />
					<input id="save" type="submit" value="Update" /><img src="/images/ajax-loader.gif" class="ajax hidden" />
					<a href="/" class="red">Cancel</a>
				</form>
			</div>
		</div>
		
    </div>
    
    <footer>
		<p>&copy; Keir Kettle 2011</p>
    </footer>
  </div> <!--! end of #container -->


  <!-- Javascript at the bottom for fast page loading -->

  <!-- Grab Google CDN's jQuery. fall back to local if necessary -->
  <script src="//ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js"></script>
  <script>!window.jQuery && document.write(unescape('%3Cscript src="../js/libs/jquery-1.4.2.js"%3E%3C/script%3E'))</script>
  <script type="text/javascript" src="../js/libs/jHtmlArea.kk.min.js"></script>

  
  <script src="../js/plugins.js"></script>	
  <script src="../js/script.js"></script>
  
</body>
</html>
